<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Lightbox Popup </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
    <!-- Popup CSS -->
    <link href="../../../assets/vendor_components/Magnific-Popup-master/dist/magnific-popup.css" rel="stylesheet">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<!-- Site wrapper -->
<div class="wrapper">



 
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Lightbox Popup
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Lightbox Popup</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
	  
	  <div class="row">
		 <div class="col-lg-6 col-12"> 
		  <!-- Default box -->
		  <div class="box">
			<div class="box-header with-border">
			  <h4 class="box-title">Popup with Youtube Video</h4>
				<h6 class="subtitle">You can use youtube video with popup just add class <code>popup-youtube</code></h6>
			</div>
			<div class="box-body">
				<a class="popup-youtube btn btn-danger" href="www.youtube.com/watch?v=sK7riqg2mr4">Open YouTube video</a>
			</div>
			<!-- /.box-body -->
		  </div>
		  <!-- /.box -->
		 </div>
		  <div class="col-lg-6 col-12">
			  <!-- Default box -->
			  <div class="box">
				<div class="box-header with-border">
				  <h4 class="box-title">Google map</h4>
					<h6 class="subtitle">You can use Googlemap with popup just add class with <code>popup-gmaps</code></h6>
				</div>
				<div class="box-body">
					<a class="popup-gmaps btn btn-info" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
				</div>
				<!-- /.box-body -->
			  </div>
			  <!-- /.box --> 
		  </div>
	  </div>
		
	  <!-- Default box -->
      <div class="box">
        <div class="box-header with-border">
          <h4 class="box-title">Zoom-gallery</h4>
        </div>
        <div class="box-body">
          	<div class="zoom-gallery m-t-30">
				<a href="../../../images/gallery/thumb/7.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
					<img src="../../../images/gallery/thumb/7.jpg" width="32.5%" alt="" />
				</a>
				<a href="../../../images/gallery/thumb/8.jpg" title="This image fits only horizontally.">
					<img src="../../../images/gallery/thumb/8.jpg" width="32.5%" alt="" />
				</a>
				<a href="../../../images/gallery/thumb/9.jpg">
					<img src="../../../images/gallery/thumb/9.jpg" width="32.5%" alt="" />
				</a>
			</div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
		
	  <!-- Default box -->
      <div class="box">
        <div class="box-header with-border">
          <h4 class="box-title">Css Animation</h4>
        </div>
        <div class="box-body">
          	<div id="image-popups" class="row">
				<div class="col-sm-2">
					<a href="../../../images/gallery/thumb/10.jpg" data-effect="mfp-zoom-in"><img src="../../../images/gallery/thumb/10.jpg" class="img-responsive" alt="" />
						<br/>Zoom</a>
				</div>
				<div class="col-sm-2">
					<a href="../../../images/gallery/thumb/11.jpg" data-effect="mfp-newspaper"><img src="../../../images/gallery/thumb/11.jpg" class="img-responsive" alt="" />
						<br/>Newspaper</a>
				</div>
				<div class="col-sm-2">
					<a href="../../../images/gallery/thumb/12.jpg" data-effect="mfp-move-horizontal"><img src="../../../images/gallery/thumb/12.jpg" class="img-responsive" alt="" />
						<br/>Horizontal move</a>
				</div>
				<div class="col-sm-2">
					<a href="../../../images/gallery/thumb/13.jpg" data-effect="mfp-move-from-top"><img src="../../../images/gallery/thumb/13.jpg" class="img-responsive" alt="" />
						<br/>Move from top</a>
				</div>
				<div class="col-sm-2">
					<a href="../../../images/gallery/thumb/14.jpg" data-effect="mfp-3d-unfold"><img src="../../../images/gallery/thumb/14.jpg" class="img-responsive" alt="" />
						<br/>3d unfold</a>
				</div>
				<div class="col-sm-2">
					<a href="../../../images/gallery/thumb/15.jpg" data-effect="mfp-zoom-out"><img src="../../../images/gallery/thumb/15.jpg" class="img-responsive" alt="" />
						<br/>Zoom-out</a>
				</div>
			</div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
		
      <!-- Default box -->
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">Single image lightbox</h3>
			<h6 class="subtitle"><code>&lt;a class="image-popup-no-margins" href="..." title="title will be apear here"&gt;&lt;img src="..."/&gt;&lt;/a&gt;</code></h6>
        </div>
        <div class="box-body">
          <div class="row">
				<div class="col-sm-4">
					<a class="image-popup-vertical-fit" href="../../../images/gallery/thumb/1.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
						<img src="../../../images/gallery/thumb/1.jpg" class="img-responsive" alt="" />
					</a>
					<small>Fits horizontally and vertically</small>
				</div>
				<div class="col-sm-4">
					<a class="image-popup-fit-width" href="../../../images/gallery/thumb/2.jpg" title="This image fits only horizontally.">
						<img src="../../../images/gallery/thumb/2.jpg" class="img-responsive" alt="" />
					</a>
					<small>Only horizontally</small>
				</div>
				<div class="col-sm-4">
					<a class="image-popup-no-margins" href="../../../images/gallery/thumb/3.jpg">
						<img src="../../../images/gallery/thumb/3.jpg" class="img-responsive" alt="" />
					</a>
					<small>Zoom animation, close on top-right.</small>
				</div>
			</div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
		
	  <!-- Default box -->
      <div class="box">
        <div class="box-header with-border">
          <h4 class="box-title">Lightbox gallery</h4>
			<h6 class="subtitle"><code>&lt;a href="..." title="title will be apear here"&gt;&lt;img src="..."/&gt;&lt;/a&gt;</code></h6>
        </div>
        <div class="box-body">
          <div class="popup-gallery">
				<a href="../../../images/gallery/thumb/4.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
					<img src="../../../images/gallery/thumb/4.jpg" width="32.5%" alt="" />
				</a>
				<a href="../../../images/gallery/thumb/5.jpg" title="This image fits only horizontally.">
					<img src="../../../images/gallery/thumb/5.jpg" width="32.5%" alt="" />
				</a>
				<a href="../../../images/gallery/thumb/6.jpg">
					<img src="../../../images/gallery/thumb/6.jpg" width="32.5%" alt="" />
				</a>
			</div> <small>just add code under class="popup-gallery".</small>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
		
	  <!-- Default box -->
      <div class="box">
        <div class="box-header with-border">
          <h4 class="box-title">Form Popup</h4>
        </div>
        <div class="box-body">
			<a class="popup-with-form btn btn-success" href="#test-form">Open form</a>
			
			<!-- form itself -->
			<form id="test-form" class="mfp-hide white-popup-block">
				<h1>Form</h1>
				<fieldset style="border:0;">
					<p>Lightbox has an option to automatically focus on the first input. It's strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed the page).</p>
					<div class="form-group">
						<label class="control-label" for="inputName">Name</label>
						<input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="">
					</div>
					<div class="form-group">
						<label class="control-label" for="inputEmail">Email</label>
						<input type="email" class="form-control" id="inputEmail" name="email" placeholder="example@domain.com" required="">
					</div>
					<div class="form-group">
						<label class="control-label" for="inputPhone">Phone</label>
						<input type="tel" class="form-control" id="inputPhone" name="phone" placeholder="Eg. +447500000000" required="">
					</div>
					<div class="form-group">
						<label class="control-label" for="textarea">Textarea</label>
						<br>
						<textarea class="form-control" id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
					</div>
				</fieldset>
			</form>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->
  </div>

 


</div>


	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
    <!-- Magnific popup JavaScript -->
    <script src="../../../assets/vendor_components/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
    <script src="../../../assets/vendor_components/Magnific-Popup-master/dist/jquery.magnific-popup-init.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	

</body>
</html>
